<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">



<ui:composition template="/modeleFormulaire.xhtml">
	<ui:define name="title">Votre recherche</ui:define>
	<ui:define name="contenu">
	
	<h:form>
	
	
	
	<!--
	
	<h:outputLabel
					style="font-size: 16; text-align:center; font-family: Segoe UI, Helvetica, Arial, sans-serif;"> 
							Affinez vos critères et visualiser vos résultats ou 
	</h:outputLabel>
	
	
	<p:commandLink action="retourDebut" style="color:#ab5ddd; margin-right:20px;" ajax="false">  
        <h:outputText style="font-size: 16; text-align:center; font-family: Segoe UI, Helvetica, Arial, sans-serif;"
        value="faites une nouvelle recherche" />  
   </p:commandLink>

	-->
	
	<center>
		<p:commandButton value="Nouvelle recherche"
										image="ui-icon ui-icon-circle-arrow-w" 
										action="retourDebut" ajax="false"/>
										
		<p:spacer height="10" width="100"/> 
			
										
		<h:outputLabel style = "font-size: 16; font-weight : bold; color:#551a7d; text-align:center; font-family: Segoe UI, Helvetica, Arial, sans-serif;">
								Choisir un nouveau mode de clustering 
		</h:outputLabel>
		
		<p:spacer height="10" width="5"/> 
							
		<h:selectOneMenu style="with: 155px; " 
							value="#{vueAffichageResultat.choixClustering}">
							<f:selectItems value="#{vueAffichageResultat.listeChoixClustering}"/>
		</h:selectOneMenu>	
		
		<p:spacer height="10" width="5"/> 						
										
		<p:commandButton value="Rechercher selon ce niveau"
										action="#{vueAffichageResultat.changerClustering}" update="monPanel"/>								
		
	</center>
	
	</h:form>							
		<p:panel id="monPanel" style="width:1225px;" header="#{vueAffichageResultat.titrePanel}">

			
			<!--
			<center>
				<h:outputLabel
					rendered="#{vueAffichageResultat.etape1}"
					style="font-size: 20; text-align:center; font-family: Segoe UI, Helvetica, Arial, sans-serif;"> 
							Choisissez le type de recherche que vous  souhaitez faire, et affinez vos critères 
				</h:outputLabel>
			</center>
			
			<center>
				<h:outputLabel
					rendered="#{vueAffichageResultat.etape2}"
					style="font-size: 20; text-align:center; font-family: Segoe UI, Helvetica, Arial, sans-serif;"> 
							Choisissez un second critère pour affiner votre recherche
				</h:outputLabel>
			</center>
			-->
			<p:messages id="info" showDetail="true" rendered="#{! vueAffichageResultat.etape1}"/> 
			<p:spacer height="50" rendered="#{vueAffichageResultat.etape1}"/> 
			
			
				

<!-- affichage de l'étape 1 -->

			
				
				<h:panelGrid columns="5" 
				columnClasses="column" width="100%" height="100%">
				
				<h:form>
					 

<!-- etape1 album-->		
								
					 
						<p:messages showDetail="true" rendered="#{vueAffichageResultat.selectionAlbum1NonValide}"/>
						<p:dataTable var="cluster"
							value="#{vueAffichageResultat.lazyModelAlbums1}"
							selection="#{vueAffichageResultat.clusterAlbumNiveau1Choisi}"
							selectionMode="single" 
							style="width:'#{vueAffichageResultat.largeurDataTables1}';"
							paginator="true" 
							rendered="#{vueAffichageResultat.etape1}"
							rows="10" 
							lazy="true"  
							paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
							rowsPerPageTemplate="5,10,15"  
							>
							
							<f:facet name="header">
								<h:outputLabel style="font-size: 18;">
						 			Trouver un album
						 		</h:outputLabel>
							</f:facet>
							

							<p:column>
								<f:facet name="header">  
			                  	#{vueAffichageResultat.intituleAxe1Album}   
					          	</f:facet>
								<h:outputText value="#{cluster.nomCluster}"/>
								<p:spacer width="100" height="10" />  
								<h:outputText value="(#{cluster.effectif} résultats)"/>
							</p:column>
							
							
							

							<f:facet name="footer">
								<p:commandButton value="Continuer"
									image="ui-icon ui-icon-circle-arrow-e" update="monPanel" 
									action="#{vueAffichageResultat.affinerRechercheAlbum1}" 
								/>
							</f:facet>
							
						</p:dataTable>


					 
				</h:form>

<!-- etape1 artiste-->
				<h:form>
					 
							
					 
						<p:messages showDetail="true" rendered="#{vueAffichageResultat.selectionArtiste1NonValide}"/>
						<p:dataTable var="cluster"
							value="#{vueAffichageResultat.lazyModelArtistes1}"
							selection="#{vueAffichageResultat.clusterArtisteNiveau1Choisi}"
							selectionMode="single" 
							rendered="#{vueAffichageResultat.etape1}"
							style="width:'#{vueAffichageResultat.largeurDataTables1}';"
							paginator="true" 
							rows="10" 
							lazy="true"  
							paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
							rowsPerPageTemplate="5,10,15"  
							>   

						
							
							<f:facet name="header">
								<h:outputLabel style="font-size: 18;">
					 			Trouver un artiste
					 			</h:outputLabel>
							</f:facet>
							
							<p:column>
								<f:facet name="header">  
		                  			#{vueAffichageResultat.intituleAxe1Artiste}
				          		</f:facet>
								<h:outputText value="#{cluster.nomCluster}"/>
								<p:spacer width="100" height="10" />  
								<h:outputText value="(#{cluster.effectif} résultats)"/>
							</p:column>
							
							
								

							<f:facet name="footer">
								<p:commandButton value="Continuer"
									image="ui-icon ui-icon-circle-arrow-e" update="monPanel"
									action="#{vueAffichageResultat.affinerRechercheArtiste1}" />
							</f:facet>
							
							
						</p:dataTable>
					 
				</h:form>
				
<!-- etape1 chanson-->	
				<h:form>
					 
						<p:messages showDetail="true" rendered="#{vueAffichageResultat.selectionChanson1NonValide}"/>
						<p:dataTable var="cluster"
							value="#{vueAffichageResultat.lazyModelChansons1}"
							selection="#{vueAffichageResultat.clusterChansonNiveau1Choisi}"
							rendered="#{vueAffichageResultat.etape1}"
							selectionMode="single" 
							style="width:'#{vueAffichageResultat.largeurDataTables1}';"
							paginator="true" 
							rows="10" 
							lazy="true"  
							paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
							rowsPerPageTemplate="5,10,15"  
							>   

							<f:facet name="header">
								<h:outputLabel style="font-size: 18;">
									Trouver une chanson 
								</h:outputLabel>
							</f:facet>

							<p:column>
								<f:facet name="header">  
		                  			#{vueAffichageResultat.intituleAxe1Chanson}
				          		</f:facet>
								<h:outputText value="#{cluster.nomCluster}"/>
								<p:spacer width="100" height="10" />  
								<h:outputText value="(#{cluster.effectif} résultats)"/>
							</p:column>	
							
							<f:facet name="footer">
								<p:commandButton value="Continuer"
									image="ui-icon ui-icon-circle-arrow-e" update="monPanel"
									action="#{vueAffichageResultat.affinerRechercheChanson1}" />
							</f:facet>

						</p:dataTable>
					

				</h:form>
						

			</h:panelGrid>
			
<!-- affichage de l'étape 2 -->
			
			 
			<center>
						<table>
						<tr>
						<td>
						<!--
						<center>
							<h:outputLabel rendered="#{vueAffichageResultat.etape2album}"
									style="font-size: 20; text-align:center; font-family: Segoe UI, Helvetica, Arial, sans-serif;"> 
											Vous recherchez un album, 1er critère : #{vueAffichageResultat.clusterAlbumNiveau1Choisi.nomCluster}		
							</h:outputLabel>
						</center>
						
						<center>
							<h:outputLabel rendered="#{vueAffichageResultat.etape2artiste}"
									style="font-size: 20; text-align:center; font-family: Segoe UI, Helvetica, Arial, sans-serif;"> 
											Vous recherchez un artiste, 1er critère : #{vueAffichageResultat.clusterArtisteNiveau1Choisi.nomCluster}		
							</h:outputLabel>
						</center>
						
						<center>
							<h:outputLabel rendered="#{vueAffichageResultat.etape2chanson}"
									style="font-size: 20; text-align:center; font-family: Segoe UI, Helvetica, Arial, sans-serif;"> 
											Vous recherchez une chanson, 1er critère : #{vueAffichageResultat.clusterChansonNiveau1Choisi.nomCluster}		
							</h:outputLabel>
						</center>
						-->
						
						
						<h:form>
							
							
<!-- etape2 album -->
								
								<p:messages showDetail="true" rendered="#{vueAffichageResultat.selectionAlbum2NonValide}"/>
								<p:dataTable var="cluster"
									value="#{vueAffichageResultat.lazyModelAlbums2}"
									selection="#{vueAffichageResultat.clusterAlbumNiveau2Choisi}"
									selectionMode="single"
									rendered="#{vueAffichageResultat.etape2album}"
									style="width:'#{vueAffichageResultat.largeurDataTables2_3}';"
									paginator="true" 
									rows="10" 
									lazy="true"  
									paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
									rowsPerPageTemplate="5,10,15"  
									>
									
									 <f:facet name="header">
										<h:outputLabel style="font-size: 18;">
							 			Trouver un album
							 			</h:outputLabel>
									</f:facet>
									
									
									<p:column>
										<f:facet name="header">  
				                  			#{vueAffichageResultat.intituleAxe2Album}
						          		</f:facet>
										<h:outputText value="#{cluster.nomCluster}"/>
										<p:spacer width="100" height="10" />  
										<h:outputText value="(#{cluster.effectif} résultats)"/>
									</p:column>
		
									
									<f:facet name="footer">
										
										<p:commandButton value="Retour"
													image="ui-icon ui-icon-circle-arrow-w" update="monPanel"
													action="#{vueAffichageResultat.retourEtape1}" />
										<p:commandButton value="Trouver"
											image="ui-icon ui-icon-search" update="monPanel"
											action="#{vueAffichageResultat.affinerRechercheAlbum2}" />
										
									</f:facet>
									
								</p:dataTable>
								
						
<!-- etape 2 artiste -->
								
								<p:messages showDetail="true" rendered="#{vueAffichageResultat.selectionArtiste2NonValide}"/>
								<p:dataTable var="cluster"
									value="#{vueAffichageResultat.lazyModelArtistes2}"
									selection="#{vueAffichageResultat.clusterArtisteNiveau2Choisi}"
									selectionMode="single"
									rendered="#{vueAffichageResultat.etape2artiste}"
									style="width:'#{vueAffichageResultat.largeurDataTables2_3}';"
									paginator="true" 
									rows="10" 
									lazy="true"  
									paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
									rowsPerPageTemplate="5,10,15"  
									>
		 		
		 							<f:facet name="header">
										<h:outputLabel style="font-size: 18;">
							 				Trouver un artiste
							 			</h:outputLabel>
									</f:facet>
																
		 							<p:column>
										<f:facet name="header">  
				                  			#{vueAffichageResultat.intituleAxe2Artiste}
						          		</f:facet>
										<h:outputText value="#{cluster.nomCluster}"/>
										<p:spacer width="100" height="10" />  
										<h:outputText value="(#{cluster.effectif} résultats)"/>
									</p:column>
									
									<f:facet name="footer">
										
											<p:commandButton value="Retour"
														image="ui-icon ui-icon-circle-arrow-w" update="monPanel"
														action="#{vueAffichageResultat.retourEtape1}" />
											<p:commandButton value="Trouver"
												image="ui-icon ui-icon-search" update="monPanel"
												action="#{vueAffichageResultat.affinerRechercheArtiste2}" />
										
									</f:facet>
									
		
								</p:dataTable>
								
<!-- etape 2 chanson -->
							
								<p:messages showDetail="true" rendered="#{vueAffichageResultat.selectionChanson2NonValide}"/>
								<p:dataTable var="cluster"
									value="#{vueAffichageResultat.lazyModelChansons2}"
									selection="#{vueAffichageResultat.clusterChansonNiveau2Choisi}"
									selectionMode="single"
									rendered="#{vueAffichageResultat.etape2chanson}"
									style="width:'#{vueAffichageResultat.largeurDataTables2_3}';"
									paginator="true" 
									rows="10" 
									lazy="true"  
									paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
									rowsPerPageTemplate="5,10,15"  
									>
									
									<f:facet name="header">
										<h:outputLabel style="font-size: 18;">
											Trouver une chanson
										</h:outputLabel>
									</f:facet>
									
										<p:column>
										<f:facet name="header">  
				                  			#{vueAffichageResultat.intituleAxe2Chanson}
						          		</f:facet>
										<h:outputText value="#{cluster.nomCluster}"/>
										<p:spacer width="100" height="10" />  
										<h:outputText value="(#{cluster.effectif} résultats)"/>
									</p:column>
									
										<f:facet name="footer">
										
											<p:commandButton value="Retour"
														image="ui-icon ui-icon-circle-arrow-w" update="monPanel"
														action="#{vueAffichageResultat.retourEtape1}" />
											<p:commandButton value="Trouver"
												image="ui-icon ui-icon-search" update="monPanel"
												action="#{vueAffichageResultat.affinerRechercheChanson2}" />
										
									</f:facet>
									
								</p:dataTable>
								
<!-- affichage de l'étape 3 -->

<!-- etape 3 album -->
								
								
								<p:panel 
									rendered="#{!empty vueAffichageResultat.albumChoisi}"
									header="Informations complémentaire sur #{vueAffichageResultat.albumChoisi.name}"
									style="width:'#{vueAffichageResultat.largeurDataTables2_3}';">
									<center>
									<table>
											<!--<tr>
												<td width="100%">
													<h:panelGrid columns="2" columnClasses="column" cellpadding="5">
														<h:outputText value="résumé : " />
														<h:outputText
															value="#{vueAffichageResultat.albumChoisi.wiki.resume}" />
														<h:outputText value="informations: " />
														<h:outputText
															value="#{vueAffichageResultat.albumChoisi.wiki.contenu}" />
													</h:panelGrid>
												</td>
											</tr>-->
											
											<tr>
											<td>
												<p:dataList value="#{vueAffichageResultat.albumChoisi.toptags}" var="tag" itemType="square">  
												   #{tag.name}   
												</p:dataList>
											</td>
											</tr>
											<tr>
												<td width="100%">
													<p:dataTable 
													var="chanson"  
													value="#{vueAffichageResultat.albumChoisi.chansons}"
													style="width:400;">
													
														<f:facet name="header">  
														    Les chansons de l'album
														</f:facet>  
														
														
														<p:column>
															<f:facet name="header">
																	titre
															</f:facet>
															<h:outputText value="#{chanson.name}" />
														</p:column>
		
														<p:column>
															<f:facet name="header">
																	duree
															</f:facet>
															<h:outputText value="#{chanson.duree}" />
														</p:column>
													</p:dataTable>
												</td>
											</tr>
										</table>
									</center>
								</p:panel>
									
								<p:dataTable var="album"
									value="#{vueAffichageResultat.lazyModelAlbums3}"
									rendered="#{vueAffichageResultat.etape3album}"
									style="width:'#{vueAffichageResultat.largeurDataTables2_3}';"
									paginator="true" 
									selectionMode="single" 
									selection="#{vueAffichageResultat.albumChoisi}"
									update="monPanel"
									rows="10" 
									lazy="true"  
									paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
									rowsPerPageTemplate="5,10,15" 
					                 >  
									
									
									
									<f:facet name="header">
										<h:outputLabel style="font-size: 18;">
							 				Les albums qui répondent à votre recherche
							 			</h:outputLabel>
									</f:facet>
									
									<p:column>
										<f:facet name="header">  
				                  			Name
						          		</f:facet>
										<h:outputText value="#{album.name}" />
									</p:column>
		
									<p:column>
										<f:facet name="header">  
				                  			Artiste
						          		</f:facet>
										<h:outputText value="#{album.artiste.name}" />
									</p:column>
									
									<p:column>
										<f:facet name="header">  
				                  			date
						          		</f:facet>
										<h:outputText value="#{album.date}" />
									</p:column>
									
									<p:column>
										<f:facet name="header">  
				                  			nombre d'auditeurs
						          		</f:facet>
										<h:outputText value="#{album.listeners}" />
									</p:column>
									
									<p:column>
										<f:facet name="header">  
				                  			nombre d'écoutes
						          		</f:facet>
										<h:outputText value="#{album.playcount}" />
									</p:column>
									
									<p:column>
										<f:facet name="header">  
				                  			Lien vers l'album sur last.fm
						          		</f:facet>
						          		<a href="#{album.url}" target="_blank"
						          		style="color:#ab5ddd; margin-right:20px;" ajax="false">
						          			vers last.fm
						          		</a> 
						          		
									</p:column>
									
		
									<p:column>
										<f:facet name="header">  
				                  			Image
						          		</f:facet>
										<p:graphicImage width="80px" weight="80px" value="#{album.imageLarge}" 
										  alt="image non disponible" />	
									</p:column>
									
									
									<f:facet name="footer">
										<p:commandButton value="Retour"
													image="ui-icon ui-icon-circle-arrow-w" update="monPanel"
													action="#{vueAffichageResultat.retourEtapeAlbum2}" />
									</f:facet>

								</p:dataTable>
								
<!-- etape 3 artiste -->

		
								
								
								<p:dataTable var="artiste"
									value="#{vueAffichageResultat.lazyModelArtistes3}"
									rendered="#{vueAffichageResultat.etape3artiste}"
									style="width:'#{vueAffichageResultat.largeurDataTables2_3}';"
									paginator="true" 
									rows="10" 
									lazy="true"  
									paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
									rowsPerPageTemplate="5,10,15"  
									>
		
									<f:facet name="header">
										<h:outputLabel style="font-size: 18;">
							 				Les artistes qui répondent à votre recherche
							 			</h:outputLabel>
									</f:facet>
											
									<p:column>
										<f:facet name="header">  
				                  			Name
						          		</f:facet>
										<h:outputText value="#{artiste.name}" />
									</p:column>
		
									<p:column>
										<f:facet name="header">  
				                  			nombre d'auditeurs
						          		</f:facet>
										<h:outputText value="#{artiste.listeners}" />
									</p:column>
									
									<p:column>
										<f:facet name="header">  
				                  			nombre d'écoutes
						          		</f:facet>
										<h:outputText value="#{artiste.playcount}" />
									</p:column>
									
									<p:column>
										<f:facet name="header">  
				                  			Lien vers l'artiste sur last.fm
						          		</f:facet>
										<a href="#{artiste.url}" target="_blank"
						          		style="color:#ab5ddd; margin-right:20px;" ajax="false">
						          			<h:outputLabel rendered ="#{artiste.url} != ''" >vers last.fm </h:outputLabel>
						          		</a> 
									</p:column>
									
									
		
									<p:column>
										<f:facet name="header">  
				                  			Image
						          		</f:facet>
										<p:graphicImage width="80px" weight="80px"  value="#{artiste.imageLarge}" 
										 alt="image non disponible" />
									</p:column>
									
									<f:facet name="footer">
										<p:commandButton value="Retour"
													image="ui-icon ui-icon-circle-arrow-w" update="monPanel"
													action="#{vueAffichageResultat.retourEtapeArtiste2}" />
									</f:facet>
									
								</p:dataTable>
							
<!-- etape 3 chanson -->		
								
						

								<p:dataTable var="chanson"
									value="#{vueAffichageResultat.lazyModelChansons3}"
									rendered="#{vueAffichageResultat.etape3chanson}"
									style="width:'#{vueAffichageResultat.largeurDataTables2_3}';"
									paginator="true"
									rows="10" 
									lazy="true"  
									paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
									rowsPerPageTemplate="5,10,15"  
									>
									
									<f:facet name="header">
										<h:outputLabel style="font-size: 18;">
							 				Les chansons qui répondent à votre recherche
							 			</h:outputLabel>
									</f:facet>
									
									<p:column>
										<f:facet name="header">
											titre
										</f:facet>
										<h:outputText value="#{chanson.name}" />
										
									</p:column>
									
									<p:column>
										<f:facet name="header">
											duree 
										</f:facet>
										<h:outputText value="#{chanson.dureeSeconde}" />
										
									</p:column>
									
									
									<p:column>
										<f:facet name="header">
											artiste 
										</f:facet>
										<h:outputText value="#{chanson.artiste.name}" />
										
									</p:column>
									
									
		
									<p:column>
										<f:facet name="header">  
				                  			nombre d'auditeurs
						          		</f:facet>
										<h:outputText value="#{chanson.listeners}" />
									</p:column>
									
									<p:column>
										<f:facet name="header">  
				                  			nombre d'écoutes
						          		</f:facet>
										<h:outputText value="#{chanson.playcount}" />
									</p:column>
									
									<p:column>
										<f:facet name="header">  
				                  			Lien vers la chanson sur last.fm
						          		</f:facet>
						          		
										<a href="#{chanson.url}" target="_blank"
						          		style="color:#ab5ddd; margin-right:20px;" ajax="false">
						          			vers last.fm
						          		</a> 
  		 								
									</p:column>
									
									
		
									<p:column>
										<f:facet name="header">  
				                  	Image
						          	</f:facet>
										<p:graphicImage width="80px" weight="80px"  value="#{chanson.imageLarge}" 
										 alt="image non disponible" />
									</p:column>
															
									<f:facet name="footer">
										<p:commandButton value="Retour"
													image="ui-icon ui-icon-circle-arrow-w" update="monPanel"
													action="#{vueAffichageResultat.retourEtapeChanson2}" />
									</f:facet>
									
									
									
								</p:dataTable>
								
								
					
							
							
							</h:form>
						</td>
						</tr>
						</table>
							
					</center>	
				
		</p:panel>
	</ui:define>
</ui:composition>
</html>







